<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.box{
			width: 0px;
			height: 0px;
			border-left: 50px solid transparent;
			border-right: 50px solid transparent;
			border-top: 50px solid red;
/*			background-color: orange;*/
			position: absolute;
			animation: one 2s linear 1s 1 alternate forwards;
/*			animation: a b c d e f g h ;*/
/*			a 关键帧动画名字(必须写)   animation-name*/
/*			b 动画完成需要的时间(必须写)   animation-durration*/
/*			c 动画执行的效果   animation-timing-funcyion*/
/*			ease 由慢到快 再到慢*/
/*			linear 匀速执行*/
/*			d 动画开始前的延迟时间 单位是 s 秒   animation-delay*/
/*			e 动画播放的次数 默认为 1 也可以写入数字 或者 用关键字 infinite 无限次   animation-iteration-count*/
/*			f 设置动画播放的方向 reverse 永远反向播放 alternate 奇数次正向播放 偶数次反向播放   animation-direction*/
/*			g 设置动画播放结束后的效果（位置）   forwards 动画结束后停留再最后一帧   backwards 动画播放结束后  回到第一帧 both  既执行第一帧 也停留再最后一帧  animation-fill-mode*/
/*			h 设置动画展厅与播放 paused 暂停 running 播放   animation-paly-state*/
		}

/*		关键帧*/
/*		创建关键帧动画*/
/*		@keyframes 动画名字{}*/
		@keyframes one{
			0%{
				left: 0;
			}
			100%{
				left: 1000px;
			}
		}
	</style>
</head>
<body>
	<div class="box"></div>
</body>
</html>